<template>
    <div class="head-panel" :style="{height:height}">
        <div class="left-panel" :style="hStyle">
            <yx-icon :color="iconColor" v-if="isShowIcons(leftIcon,leftText)"
                     v-for="(icon,index) in leftIcon"
                     @click="rewriteLeftIconClicked(index)"
                     :ucode="icon"
                     size="md"
                     :class="['head-icon',index == 0 && 'left-icon-first']" ></yx-icon>

            <yx-icon
                v-if="isShowStringIcons(leftIcon,leftText)"
                :color="iconColor"
                :ucode="leftIcon"
                @click="rewriteLeftIconClicked"
                class="head-icon left-icon-first"></yx-icon>

            <text @click="rewriteLeftIconClicked" class="icon-text" v-if="isShowText(leftText)">{{leftText}}</text>

        </div>
        <div class="middle-panel" :style="hStyle">
            <text :style="middleTextStyle" class="middle-icon">{{title}}</text>
        </div>
        <div class="right-panel" :style="hStyle">
            <yx-icon
                :color="iconColor"
                @click="rewriteRightIconClicked(index)"
                v-if="isShowIcons(rightIcon,rightText)"
                v-for="(icon,index) in rightIcon"
                :ucode="icon" size="md"
                :class="['head-icon',index == 1 && 'right-icon-first']"></yx-icon>

            <yx-icon
                :color="iconColor"
                :ucode="rightIcon"
                @click="rewriteRightIconClicked"
                class="head-icon right-icon-first"
                v-if="isShowStringIcons(rightIcon,rightText)"></yx-icon>

            <text @click="rewriteRightIconClicked" class="icon-text" v-if="isShowText(rightText)"></text>
        </div>
    </div>
</template>

<script>
    import YxIcon from 'Components/yx-icon'
    import Utils from 'Utils/utils'
    export default {
        name: "yx-head",

        props: {
            /**
             * 设置高度
             */
            height: {
                type: Number,
                default: 80
            },
            /**
             * 导航栏标题
             */
            title: {
                type: String,
                default: ''
            },
            /*左边图标*/
            leftIcon: {
                type:[String],
                default:'e649'
            },
            /*右边图标*/
            rightIcon: {
                type: [String],
                default: ''
            },

            /*左边文字*/
            leftText: {
                type: String,
                default: ''
            },

            /*右边文字*/
            rightText:{
                type: String,
                default: ''
            },
            /*图标的颜色*/
            iconColor:{
                type: String,
                default: 'white'
            },
            /*右边点击事件*/
            rightClicked:{
                type: Object,
                default: null
            },
            /*中间字体样式*/
            middleTextStyle:{
                type: Object,
                default: {}
            },
            /*隐藏图标*/
            hiddenIcon:{
                type: Boolean,
                default: false
            }

        },

        data:{
            /**
             * 高度样式
             */
            hStyle:{}
        },
        components:{ YxIcon },
        beforeCreate(){

        },
        created(){

            this.validateIcons()

            var config = weex.config.eros
            this.height = config.statusBarHeight + this.height

            this.hStyle = {
                height:this.height,
                paddingTop:config.statusBarHeight
            }

        },
        methods:{
            /**
             * 验证左右两边图标是否超过两个
             *
             */
            validateIcons(){
                if (Utils.isNotEmpty(this.leftIcon)) {
                    if (typeof  this.leftIcon == 'object' &&
                    this.leftIcon.length >2) {
                        this.$notice.alert({
                            message: '给开发人员：左边的图标不能超过两个'
                        })
                        return
                    }
                }

                if (Utils.isNotEmpty(this.rightIcon)) {
                    if (typeof this.rightIcon == 'object' &&
                        this.rightIcon.length > 2) {
                        this.$notice.alert({
                            message: '给开发人员：右边的图标不能超过两个'
                        })

                    }
                }
            },
            /**
             * 是否显示图标
             * 注：icons是数组时
             * 文字优先级高于图标
             * @param icons
             * @param text
             */
            isShowIcons(icons,text){
                if (Utils.isNotEmpty(text)) {
                    return false
                }

                if (this.hiddenIcon) {
                    return false
                }

                if (typeof icons == 'object') {
                    return true;
                }
                return false
            },

            /**
             * 是否显示图标
             * 注：图标是字符串
             * 文字的优先级高于图标
             */
            isShowStringIcons(icons,text){
                if (Utils.isNotEmpty(text)) {
                    return false
                }

                if (this.hiddenIcon) {
                    return false
                }

                if (typeof icons == 'string' && Utils.isNotEmpty(icons)) {
                    return true
                }

                return false
            },

            /**
             * 是否显示文字
             * 文字的优先级高于图标
             */
            isShowText(text){
                return Utils.isNotEmpty(text) ? true:false
            },

            /**
             * 重写左边图标或者文字点击事件
             */
            rewriteLeftIconClicked(index){

                var self = this
                if (typeof index == 'number') {
                    let icon = this.leftIcon[index]
                    if (icon == 'e649') {
                        this.$router.back({
                            callback(){
                                self.$emit('leftClicked',index)
                            }
                        })
                        return
                    }
                }

                if (typeof this.leftIcon == 'string') {
                    if (this.leftIcon == 'e649') {
                        this.$router.back({
                            callback(){
                                self.$emit('leftClicked',index)
                            }
                        })
                        return
                    }
                }

                self.$emit('leftClicked',index)
            },

            /**
             * 重写右边图标事件
             * @param index
             */
            rewriteRightIconClicked(index){
                this.$emit('rightClicked',index)
            }

        }
    }
</script>

<style lang="scss" scoped>
    @import "yx-head";
</style>
